<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_元素内容操作：元素以及元素内容的部分
		     .html()         无参----功能:获取匹配元素中第一元素的内容
			                 有参----功能：【设置】获取匹配元素中第一元素的内容
			特点：内容+元素
			 .val()          无参----功能：表单内元素：input、select生效
			                         获取表单元素中第一元素的内容
			                 有参----功能：表单内元素：input、select生效
							              input元素直接显示value
										  slect元素不是直接显示
										  option元素中内容,用户显示
										  option元素中value值
										  必须当前select中 option元素value值
										  直接赋值：打印select元素对象名称[object Object]
			特点：针对（表单内form元素可以包裹）元素的内容
		     .text()
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>html()函数使用</h1>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮--针对val()函数-无参</button>
		<input type="text" value="文本框真实的数据">
		<input type="text" placeholder="输入框显示效果[提示]">
		<!-- html:按钮  | 下拉列表  select>option*3 需要加value -->
		<!-- jq:点击按钮，设置下拉列表的值 | html()与val()有参是否存在区别 -->
		<button>按钮-针对html()函数-有参</button>
		<select>
			<option value="rem1"></option>
			<option value="rem2"></option>
			<option value="rem3"></option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<!-- text()        无参-功能：获取匹配元素集合中所有元素的文本内容
		                   有参-功能：【设置】匹配元素集合中所有元素的文本
						              内容替换
		 -->
		 
		<script>
			//1.找到 类名为 btn1 的按钮--点击--弹窗内容为 三个 p元素内容【元素】
			$("button").click(function(){
				var ptext=$("p").text();
				alert(ptext);
				});
				//2.找到 类名为 btn2 的按钮--点击--lorem4\5\6  改成 "修改文本"【有参】
				// $("button").click(function(){
				// 	//抓下拉列表的value值---select
				// 	//设置元素第一个的值   1.直接设置下拉列表中value的值
				// 	$("select").val("rem1");
				// 	//设置元素第一个的值   2.直接设置下拉列表中value的值
				// var rem=$("select").val();
				
				
				// //[object Object]JavaScript中 对象的默认字符串表示形态
				// //select元素 对象 输出[object Object]
				
				
				
				// //value的值：真实数据  option中值：显示数据
				// //object:object    测试  无参
				// alert("val()函数有参:"+rem);
				// });
				
				
			//动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
			$("button").click(function(){
				/*注意：js变量名不可以为关键字！       in是关键字*/
			var in=$("input").val();
			alert("val()函数无参:"+ins)
			});
			
			//有参：点击按钮 --下面两个span 改名为lorem3和lorem4
			/* $("button").click(function(){
				/*JQ操作DOM---html()函数使用*/
				$("span").html("<span>lorem</span>");
			});*/
			//js变量 【var i=1】==jq变量     var  变量名=值、元素
			//无参数    heml() 函数使用
		// var html=$("span").html();
		//BOM方式  打印数据
		alert("无参数获取第一个元素内容:"html);
		</script>
	</body>
</html>